<template>
  <view>
    <button type="primary" @click="setStorage">存储数据</button>
    <button type="primary" @click="getStorage">获取数据</button>
    <button type="primary" @click="removeId">移除id</button>

    <!-- #ifdef H5 -->
    <view>我希望只在h5页面中看见</view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view>我希望只在微信小程序页面中看见</view>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <view>我希望只在APP页面中看见</view>
    <!-- #endif -->

    <!-- <button @click="pullDown">下拉刷新</button> -->
    <view>这是列表页</view>
    <view class="box-item" v-for="item in list">
      {{item}}
    </view>
	<button type="primary" @click="chooseImg">上传图片</button>
	<image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>
  </view>
</template>
<script>
export default {
  data() {
    return {
  list: ["前端", "JAVA", "UI", "测试", "大数据"],
    };
  },
  methods: {
    setStorage() {
      // 异步调用
      // uni.setStorage({
      //   key: 'id',
      //   data: 88,
      //   success() {
      //     console.log('存储成功')
      //   }
      // })

      // 同步调用
      uni.setStorageSync('id', 100)
    },
    getStorage() {
      // uni.getStorage({
      //   key: 'id',
      //   success(res) {
      //     console.log('获取成功', res.data)
      //   }
      // })
      const res = uni.getStorageSync('id')
      console.log(res)
    },
    removeId() {
      // 可添加移除id的逻辑，比如 uni.removeStorage({ key: 'id' }) 等
    },
    pullDown() {
		console.log("开启下拉刷新")
    }
  },
  chooseImg() {
    uni.chooseImage({
      count: 5,
      success: res => {
        this.imgArr = res.tempFilePath
      }
    })
  }
  previewImg(current) {
    uni.previewImage({
      current,
      urls: this.imgArr,
      loop: true,
      indicator: 'default'
    })
  }
  onPullDownRefresh() {
    console.log('触发了下拉刷新')
    setTimeout(() => {
      this.list = ['JAVA', 'UI', '前端', '测试', '大数据']
      uni.stopPullDownRefresh()
    }, 2000)
  },
  onReachBottom() {
    console.log('页面触底了')
    this.list = [...this.list, ...['JAVA', 'UI', '前端', '测试', '大数据']]
  },
   onShow() {
     console.log('页面显示了')
   },
  onReady(){
    console.log('页面初次渲染完成了')
  },
  onHide() {
    console.log('页面隐藏了')
  },
  onLoad () {
    // #ifdef H5
    console.log('我希望h5中打印')
    // #endif
    // #ifdef MP-WEIXIN
    console.log('我希望微信小程序中打印')
    // #endif
  },
};
</script>

<style>
.box-item{
  height: 100px;
  line-height: 100px;
}

/* h5中的样式 */
/* #ifdef H5 */
view{
  color: hotpink;
}
/* #endif */
/* 微信小程序中的样式 */
/* #ifdef MP-WEIXIN */
view{
  color: #0000FF;
}
/* #endif */
</style>